import React, { useEffect, useState, useCallback } from 'react';
import { Modal, Form, Input, DatePicker, Space, Select, message } from 'antd';
import { getSchoolFacultyListBySchool, addClass } from '@/services/basic/class_and_grade';
import { getspecialtyList } from '@/services/basic/student';
import { IAllProps } from '@/typings/types';
const { Option } = Select;

const CreateForm = (props) => {
  const { modalVisible, onCancel,refreshList } = props;
  const [form] = Form.useForm();
  const [schoolFacultyList, setschoolFacultyList] = useState([]);
  const [schoolSpecialtyList, setSchoolSpecialtyList] = useState([]);
  const handleHidden = () => {
    onCancel();
  };
  const handleReset = ()=>{
    form.resetFields();
    onCancel();
    refreshList();
  }
  const handleSumbit = async (values) => {
    const {
      className,
      classAbbreviate,
      classAcademic,
      classBeginTime,
      schoolFacultyId,
      schoolSpecialId,
    } = values;
    const params = {
      className,
      classAbbreviate,
      classAcademic,
      classBeginTime,
      schoolFacultyId,
      schoolSpecialId,
    }; 
    const addResult = await addClass(params)
    console.log(addResult); 
    if(addResult.code === 0){
      handleReset()
      message.success('修改成功');
    }else {
      message.error('修改失败');
    }
    return
  };

  const handleOk = () => {};

  const handleSchoolFacultyChange = useCallback(async (value) => {
    const result = await getspecialtyList(value);
    console.log(result);
    const { code, data } = result;
    if (code === 0) {
      setSchoolSpecialtyList(data);
    }
  }, []);

  useEffect(() => {
    (async () => {
      const result = await getSchoolFacultyListBySchool();
      const { code, data } = result;
      if (code === 0) {
        setschoolFacultyList(data);
      }
    })();
  }, []);

  return (
    <Modal
      destroyOnClose
      title="新增班级"
      visible={modalVisible}
      onCancel={handleHidden}
      // onOk={handleOk}
    >
      <Form onFinish={handleSumbit}>
        <Form.Item
          name="schoolFacultyId"
          label="所属院（系）"
          rules={[{ required: true, message: '院系必选！' }]}
        >
          <Select onChange={handleSchoolFacultyChange}>
            {schoolFacultyList.map((a: IAllProps) => (
              <Option value={a.facultyId} key={a.facultyId}>
                {a.name}
              </Option>
            ))}
          </Select>
        </Form.Item>
        <Form.Item
          name="schoolSpecialId"
          label="所属专业"
          rules={[
            {
              required: true,
            },
          ]}
        >
          <Select>
            {schoolSpecialtyList.map((b: IAllProps) => (
              <Select.Option value={b.specialId} key={b.specialId}>
                {b.name}
              </Select.Option>
            ))}
          </Select>
        </Form.Item>
        <Form.Item
          name="className"
          label="班级名称"
          rules={[
            {
              required: true,
            },
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          name="classAbbreviate"
          label="班级简称"
          rules={[
            {
              required: true,
            },
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          name="classAcademic"
          label="学制"
          hasFeedback
          rules={[
            {
              required: true,
            },
          ]}
        >
          <Select placeholder="选择学制">
            <Option value="3年">3年</Option>
            <Option value="4年">4年</Option>
          </Select>
        </Form.Item>
        <Form.Item
          name="classBeginTime"
          label="开学时间"
          rules={[
            {
              required: true,
            },
          ]}
        >
          <Space direction="vertical">
            <DatePicker placeholder="点击选择" />
          </Space>
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default CreateForm;
